<template>
	<div>
		<!-------搜索商品---------->
		<div class="bg1">
			<div>
				<p>
					<span class="sp1">&#xe603;</span>
					<span class="po">搜索商品：请输入关键字</span>
				</p>
			</div>
			<router-link to="/dyheadertwo">			
				<img src="/static/market-img/1497922820208_4177_30.jpg" />
			</router-link>
		</div>
		<!-----------亚米糕点---------->
		<div class="gao">
			<div>
				<router-link to="/dyheaderone"class="link">				
					<img src="/static/market-img/1499938012353_3131_33.jpg"/>		
				</router-link>
			</div>	
			
			<div>
				<router-link to="/dyheaderone" class="link">
					<img src="/static/market-img/1499938014780_9454_37.jpg"/>
				</router-link>
			</div>
			<div>
				<router-link to="/dyheaderone" class="link">
					<img src="/static/market-img/1499938016893_3367_26.jpg"/>		
				</router-link>
			</div>
			<div>
				<router-link to="/dyheaderone" class="link">
					<img src="/static/market-img/1499938019683_5148_38.jpg"/>
				</router-link>
			</div>
		</div>
		<!--------专区必买--------------->
		<img class="d1" src="/static/market-img/1499938027684_999_30.jpg"/>
		<div class="hot">			
			<div>
				<router-link to="/dyheaderthree" class="link">
					<img src="/static/market-img/1502701404854_1067_94.jpg"/>
				</router-link>
			</div>
			<div>
				<router-link to="/dyheaderthree" class="link">
					<img src="/static/market-img/1502278365725_9731_90.jpg"/>
				</router-link>
			</div>
			<div>
				<router-link to="/dyheaderthree" class="link">
					<img src="/static/market-img/1502278388578_5242_96.jpg"/>
				</router-link>
			</div>
			<div>
				<router-link to="/dyheaderthree" class="link">
					<img src="/static/market-img/1502278388289_7760_87.jpg"/>
				</router-link>
			</div>
		</div>
		<!----------今日热销推-------------------->
		<img class="d1" src="/static/market-img/1499938080996_4205_30.jpg"/>
		<div class="nuan">
			<div>
				<router-link to="/dyheaderfour" class="link">
					<img src="/static/market-img/1499939414898_7541_26.jpg"/>
				</router-link>
			</div>
			<div class="two">
				<div><img src="/static/market-img/1499938110623_6856_33.jpg"/></div>
				<div><img src="/static/market-img/1499938112663_5236_37.jpg"/></div>
				<div><img src="/static/market-img/1502698201111_1623_98.jpg"/></div>
				<div><img src="/static/market-img/1502697706772_5083_88.jpg"/></div>								
			</div>
		</div>	
		
		<div class="nuan">
			<div>
				<router-link to="/dyheaderfour" class="link">
					<img src="/static/market-img/1501678978155_8850_89.jpg"/>
				</router-link>
			</div>
			<div class="two">
				<div><img src="/static/market-img/1501678985151_7937_95.jpg"/></div>
				<div><img src="/static/market-img/1501679013715_6959_86.jpg"/></div>
				<div><img src="/static/market-img/1501679023057_3472_88.jpg"/></div>
				<div><img src="/static/market-img/1501679028422_304_90.jpg"/></div>								
			</div>
		</div>	
		<!---------商品展示---------------->
		<div class="dyshop">
			<div class="pto1" v-for="t in dylist" key="$index">
				<p><img :src="t.picUrl"></p>
				<p class="d-m1">{{t.mpName}}</p>
				<p class="d-m2 d-null"></p>
				<p class="d-p">￥{{t.price}}</p>
				<p class="d-pin"><span class="d-p">{{t.ratingCount}}</span><span>条评论</span>&nbsp;&nbsp;<span>好评</span><span class="d-p">{{t.positiveRate}}%</span><span class="d-img d-img-cart" @click="dyadd(t)">&#xe6f0;</span></p>				
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		//初始化数据
		data(){
			return{
				//请求数据存储的地方
				dylist:[]
			}
		},
		//方法
		methods:{
			//请求数据的方法
				request(){
					this.$http({
						url:"http://m.laiyifen.com/page/module/getModuleData?categoryId=&pageNo=1&pageSize=10&moduleId=1003030900000097",
						method:"get"						
					}).then(function(res){
						console.log(res);
						this.dylist=res.body.data.listObj;
						console.log(this.dylist);
					})
				},
				//添加购物车的方法
				//步骤1：给个点击事件，dyadd(t),t是传入的参数，是当前请求数据的对象
				//步骤2：dyadd(shoop),shoop是接收的参数
				dyadd(shoop){
					//判断当前的num数量
					if(shoop.num){
						shoop.num+=1
					}else{
						shoop.num=1
					}
					//this指代当前组件，用来调用仓库里是数据
					//addcart是调用main.js里的方法，同时shoop也要传过来					
					this.$store.commit("addcart",shoop);
					console.log(shoop);
					console.log(this.$store.state.cartFoots);
				}
		},
		mounted(){
			this.request();
		}
	}
</script>

<style scoped>
	/*头部*/
	@font-face {
	  font-family: 'iconfont';  /* project id 347964 */
	  src: url('//at.alicdn.com/t/font_347964_6cpybsfd3h9z4cxr.eot');
	  src: url('//at.alicdn.com/t/font_347964_6cpybsfd3h9z4cxr.eot?#iefix') format('embedded-opentype'),
	  url('//at.alicdn.com/t/font_347964_6cpybsfd3h9z4cxr.woff') format('woff'),
	  url('//at.alicdn.com/t/font_347964_6cpybsfd3h9z4cxr.ttf') format('truetype'),
	  url('//at.alicdn.com/t/font_347964_6cpybsfd3h9z4cxr.svg#iconfont') format('svg');
	}
	.sp1{
		font-family: 'iconfont';
		font-size: .5rem;
		vertical-align: top;
		margin-left: .29rem;
	}
	.bg1>img{
		width: 100%;
	}
	.po{
		margin-left: .1rem;
	}
	.bg1{
		margin-top:1.3rem ;
	}
	.bg1>div>p>img{
		width: 100%;
	}
	.bg1 div{
		height: .7rem;
		line-height: .7rem;
		padding: 0.15rem;
		background:#ebeced ;
	}
	.bg1 div p{
		width: 95%;
		margin: 0 auto;
		border-radius: .1rem;
		background: white;
		color: #bbb;
	}
	/*亚米糕点*/
	.gao{
		display: flex;
		text-align: center;
		justify-content: space-between;
	}
	.gao{
		border-bottom: .2rem solid #ebeced;
	}
	.gao>div{
		width: 25%;
	}
	.gao>div img{
		width:100%;
	}
	/*专区必买*/
	.d1{
		width: 100%;
	}
	.hot{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		border-bottom: .2rem solid #ebeced;
	}
	.hot>div{
		width: 50%;
	}
	.hot>div>img{
		width:100%;
	}
/*今日热销*/
.d2{
	width: 100%;
}
.nuan div:first-of-type{
	width: 40%;
	float: left
}
.nuan div:first-of-type img{
	width: 100%;
}
 .nuan .two{
 	display: flex;
 	justify-content: space-between;
 	flex-wrap: wrap;
 }
  .nuan .two div{
  	width: 50%;
  }
  .nuan .two div img{
  	width: 100%;
  }
  .nuan{
  	border-bottom: .55rem solid #ebeced;
  }
  /*商品展示*/
 .dyshop{
 	background: #ebeced;
 	display: flex;
 	justify-content: space-around;
 	flex-wrap: wrap;
 	padding: 0.1875rem 0.140625rem;
 	margin-bottom: 1.38rem;
 }
.dyshop div{
	background: white;
	width: 45%;	   
	padding-left: .3rem;
}
.dyshop .pto1,.dyshop .pto2{
	border-bottom: .3rem solid #ebeced;	
}
.dyshop .pto2{
	/*margin-right: .2rem;*/
}
.d-m1{
	overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .4rem;
    width: 3rem;
}
.dyshop div p:first-of-type{
	padding-bottom: 0.2rem;
}
.d-m2 img{
	width: .7rem;
    margin-top: .1rem;
}
.d-null{
	height:0.5rem ;
	margin-top: .1rem;
    line-height: 0.5rem;
}
.d-p{
	 color: #ff6900;
	 font-size: 0.4rem;
}
.d-pin{
	color:#999 ;
	padding: .1rem 0 .3rem 0;
}
.d-img{
	font-family: 'iconfont';
	color:#ff6900;
	font-size: .75rem;

}  
.d-img-cart{
	 margin-left: -17px;
}
@font-face {
  font-family: 'iconfont';  /* project id 347964 */
  src: url('//at.alicdn.com/t/font_347964_88q07ci1ffos9k9.eot');
  src: url('//at.alicdn.com/t/font_347964_88q07ci1ffos9k9.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_347964_88q07ci1ffos9k9.woff') format('woff'),
  url('//at.alicdn.com/t/font_347964_88q07ci1ffos9k9.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_347964_88q07ci1ffos9k9.svg#iconfont') format('svg');
}
</style>
